<template>
    <div id="app">
        <h2>Simple todoList -vue3</h2>
        <input id="add-input" v-model="todoText" @keyup.enter="addTodo" placeholder="do what?" />
        <ul>
            <Todo v-for="(todoItem, index) in todoList" :index="index" :todoItem="todoItem"></Todo>
        </ul>
    </div>
</template>
<script>
    import Todo from './components/Todo.vue'

    export default {
        name: 'todoList',
        components: {Todo},
        data() {
            return {
                todoText: ''
            }
        },
        computed: {
            todoList() {
                return this.$store.getters.todos
            }
        },
        methods: {
            addTodo() {
                this.$store.commit('addTodo', this.todoText)
                this.todoText = ''
            }
        }
    }
</script>


<style>
    body {
        font-family: Helvetica, sans-serif;
    }

    #app {
        width: 800px;
        margin: 30px auto;
    }

    #add-input {
        width: 750px;
        height: 35px;
        padding: 0 5px;
    }

    ul {
        list-style: none;
        padding: 0;
    }
</style>
